<template>
  <div class="read_question_style question_style" :class="isAnswer ? 'checked_question_style' : ''">
    <div
      class="question-title no-select"
      :class="isAnswer ? (question.isTrue == 1 ? 'bg-true-title' : 'bg-false-title') : ''"
    >
      <span class="number mr10">
        <span class="now-number" v-if="nowIndex">{{ nowIndex }}</span>
        <span v-if="totalIndex">/{{ totalIndex }}</span>
        <span v-if="nowIndex && !totalIndex">.</span>
      </span>
      <span class="title-text">
        <span
          class="html-style html-content-style"
          v-if="!isHiddenTitle"
          v-html="questionTitle"
        ></span>
        <span v-else></span>
      </span>
      <span class="feedback-btn click" v-if="!$store.getters.isTeacher" @click="showFeedBack"
        > 反馈</span
      >
    </div>
    <div class="bg-griy">
      <div class="question-answer-list" v-if="question.answerType == 1">
        <el-radio-group v-model="question.studentAnswer[0]" :class="{noClick:!isClick}">
          <el-radio
            :label="answer.answer_id"
            v-for="(answer, index) in question.answerList"
            :key="answer.answer_id"
            :class="[
              isAnswer && answer.answer_id == question.studentAnswer[0] ? 'stu-answer-label' : '',
              isAnswer && answer.answer_id == question.trueAnswer[0].answer_id
                ? 'true-answer-label'
                : '',
            ]"
            :disabled="isAnswer"
          >
            <span class="answer-label mr10">
              {{ String.fromCharCode(index + 65) }}
            </span>
            <div class="html-style html-content-style" v-html="answer.answer"></div>
          </el-radio>
        </el-radio-group>
      </div>
      <div class="question-parse" v-if="isAnswer">
        <p class="parse-btn click" @click="showParse = !showParse">
          查看解析
          <i :class="!showParse ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"> </i>
        </p>

        <div class="parse-test" v-show="showParse && question.answerType == 2">
          <div class="parse-label">正确答案</div>
          <div class="parse-html-container">
            <span
              class="parse-html true-answer mr20"
              v-for="(answer, index) in question.trueAnswer"
              :key="index"
            >
              {{ answer.answer.replace(/\$or\$/g, " 或 ") }}
            </span>
          </div>
        </div>
        <div class="parse-test" v-show="showParse">
          <div class="parse-label">解析</div>
          <div class="parse-html-container">
            <div
              class="parse-html ql-editor html-style html-content-style"
              v-html="question.parse"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <Feedback
      ref="feedback"
      :type="2"
      :questionId="question.questionId"
      :parentId="parentId"
      :classify="classify"
    ></Feedback>
  </div>
</template>
<script>
import Feedback from "@/components/Feedback";

export default {
  data() {
    return {
      showParse: false,
    };
  },
  computed: {
    questionTitle() {
      if (this.question.answerType == 2 && this.isAnswer) {
        let newTitle = this.question.title;
        let index = 1;
        let pos = newTitle.indexOf("_____");
        while (pos !== -1) {
          let answerTest = "";
          let answerIsTrue = false;
          console.log(this.question.verifyAnswer[index - 1],"this.question.verifyAnswer[index - 1]");
          if (this.question.verifyAnswer[index - 1]) {
            answerTest = this.question.verifyAnswer[index - 1].answer;
            answerIsTrue = this.question.verifyAnswer[index - 1].is_true;
          }
          newTitle = newTitle.replace(
            /_{5}/,
            ` <span class='question-input ${
              answerIsTrue ? "question-input-true" : "question-input-false"
            }' autocomplete="off" onpaste = "return false"; disabled="value" value="${answerTest}">${answerTest}</span> `
          );
          index++;
          pos = newTitle.indexOf("_____");
        }
        return newTitle.replace(/[\r\n]/g, "<br />");
      }
      return this.question.title.replace(/[\r\n]/g, "<br />");
    },
  },
  components: {
    Feedback,
  },
  methods: {
    showFeedBack() {
      if (this.question.questionId && this.$refs.feedback) {
        this.$refs.feedback.visible();
      }
    },
  },
  props: {
    isClick:{
      type:Boolean,
      default: true,
    },
    question: {
      // question内容
      type: Object,
    },
    isHiddenTitle: {
      // 是否展示title
      type: Boolean,
      default: false,
    },
    isAnswer: {
      // 有没有校验
      type: Boolean,
    },
    totalIndex: {
      // 总Number
      type: Number,
    },
    nowIndex: {
      // 当前Number
      type: Number,
    },
    parentId: {
      // 如果有prantId
      type: Number,
    },
    classify: {
      type: Number,
    },
  },
};
</script>

<style scoped>
.noClick{
  pointer-events: none;
}
</style>
